<template>
	<view class="welcome_box">
		<Tips></Tips>
		<view class="header">
			<view class="info">
				<view class="name">
				</view>
				<view class="tip">
					欢迎您的加入
				</view>
			</view>
			<view class="illustration">
				<image
					style="width: 350rpx; height: 350rpx;" 
					mode="aspectFit"
					:src="joinSystemPath('welcome.png')"/>
			</view>
		</view>
		<view class="content">
			<view class="submit" v-if="isShare">
				<button class="invite_joiner" open-type="share">微信聊天邀请室友</button>
			</view>
			<view class="submit" v-else>
				<MyButton
					:bgc="primary_hot_color"
					:clickFun="submitJoinDormitoryFun"
					>加入</MyButton>
			</view>
		</view>
		<view class="code" v-if="isShare">
			<image
				v-if="erCodeImg"
				style="width: 360rpx;margin-bottom: -20rpx;" 
				mode="aspectFit"
				:src="joinPublicityCodePath(erCodeImg)"/>
			<w-qrcode
				v-if="!erCodeImg"
				style="position: absolute;top: 10000rpx;"
				:options="options"
				@generate="createCodeCallback"
			></w-qrcode>
			<view class="code_tip">
				微信扫码进宿舍
			</view>
		</view>
		<view style="padding: 0 20rpx;">
			<AdBanner width="100%"/>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,onShareAppMessage,
		onHide
	} from '@dcloudio/uni-app'
	import {ref, watch,reactive, nextTick,onUnmounted} from 'vue'
	
	import MyInput from '@/components/MyInput/MyInput.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import Tips from '@/components/Tips/Tips.vue'
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	
	import {
		joinSystemPath,
		joinDormitoryCover,
		joinPublicityCodePath
	} from '@/utils/imgJoinName.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	
	import {DormitoryModel} from '@/service/model/dormitory.js'
	import {UserModel} from '@/service/model/user.js'
	
	import {
		verifyIsLogin,
		verifyFormData
		} from '@/hooks/verify.js'
	import {
		uploadImgHook
	} from '@/hooks/uploadImg.js'
	
	const user_store=userStore()
	
	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()
	const erCodeImg = ref('')
	
	const {
		primary_hot_color,
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const formData=ref({
		nick_name_by_dormitory:user_store.userInfo.nick_name
	})
	
	watch(()=>user_store.userInfo,()=>{
		formData.value.nick_name_by_dormitory=user_store.userInfo.nick_name
	})
	
	const navTitle = ref('宿舍：')
	const dormitoryAllId=uni.getStorageSync('homeData')
	const dormitoryData=ref()
	const isShare=ref(false)
	const options = reactive({
		code: '',
		color: ['#EE355C'],// 二维码颜色支持渐变色 目前只支持最多10种颜色的渐变
		size: 399,
		border:{
			color: ['#EE355C'], //边框颜色支持渐变色 最多10种颜色 如果默认黑色此属性不需要传
			opacity: 0.6, //边框透明度 默认为1不透明 0~1
			lineWidth: 3, //边框宽度
		}
	})
	// 二维码创建成功
	const createCodeCallback=(res)=>{
		console.log('二维码创建成功',res)
		if(erCodeImg.value) return
		uploadImgHook("uploadPublicity",'/upload/publicity/code',res.img.tempFilePath)
	}
	//更新宿舍二维码
	const updateDormitoyCodeImgFun=async(img_url)=>{
		await dormitoryModel.updateDormitoyCodeImg({img_url},dormitoryAllId.dormitory_id)
		setTimeout(()=>{
			erCodeImg.value = img_url
		},1000)
	}
	//监听图片上传成功
	uni.$on('uploadPublicity',function(data){
		;(()=>{
			if(data){
				updateDormitoyCodeImgFun(data)
			}
		})()
	})
	//匿名获取宿舍部分信息 
	const getDormitoryInfo=async(dormitory_id)=>{
		uni.showLoading({
			mask:true,
			title:'加载中'
		})
		const {data,success} =await dormitoryModel.getDormitoryPartInfo({dormitory_id})
		
		if(success){
			dormitoryData.value = data
			uni.hideLoading()
			nextTick(()=>{
				if(isShare.value){
					erCodeImg.value = data.erCode
					setTimeout(()=>{
						if(!data.erCode){
							options.code = `https://demo.wangxuelong.vip/dormitory/publicity?dormitory_id=${dormitory_id}&isPublicity=no`
						}
					},500)
			}})
			uni.setNavigationBarTitle({
				title:"加入："+data.dormitory_name
			})
		}
	}
	
	const nickNnameByDormitorySchema={
		nick_name_by_dormitory:{
			required:true,
			tip:'在该宿舍的昵称'
		}
	}
	//提交加入宿舍
	const submitJoinDormitoryFun=async()=>{
		verifyIsLogin()
		verifyFormData(formData.value,nickNnameByDormitorySchema)
		
		const {data,success} = await dormitoryModel.postJoinDormitory({dormitory_id:dormitoryData.value.id})
		if(success){
			uni.setStorageSync('homeData',data)
			
			uni.reLaunch({
				url:`/pages/Dormitory/Dormitory`,
				success:()=>uni.$emit('tips','加入成功','success')
			})
		}
	}
	
	onShareAppMessage((res)=>{
		return {
			  title: '欢迎您的加入',
			  path: `/pages/Dormitory/DormitoryInvite/DormitoryInvite?dormitory_id=${dormitoryAllId.dormitory_id}`,
			  mpPath:`/pages/Dormitory/DormitoryInvite/DormitoryInvite?dormitory_id=${dormitoryAllId.dormitory_id}`
			}
	})
	
	onLoad((opt)=>{
		const {dormitory_id,share} = opt
		if(dormitory_id){
			if(share==='true'){
				isShare.value=true
			}
			getDormitoryInfo(dormitory_id)
		}else{
			uni.$emit('tips','info','这个不是邀请链接')
		}
	})
	onUnmounted(()=>{
		uni.$off('uploadAvatar')
	})
	onHide(()=>{
		uni.$off('uploadAvatar')
	})
</script>

<style lang="less">
	.code{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		border-top: 1rpx dotted v-bind(primary_hot_color);
		margin-top: 100rpx;
		.code_tip{
			width: 100%;
			display: flex;
			justify-content: center;
			color: v-bind(primary_hot_color);
			font-size: 40rpx;
			font-weight: 800;
		}
	}
	.welcome_box{
		height: calc(100vh);
		width: 100%;
		.header{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.info{
				font-size: 40rpx;
				font-weight: 800;
				color: v-bind(primary_hot_color);
				.name{
					font-size: 26rpx;
					color: v-bind(primary_hot_color);
				}
			}
		}
		.content{
			width: 100%;
			.form{
				margin-bottom: 100rpx;
			}
			.submit{
				padding: 0 60rpx;
			}
			.invite_joiner{
				background-color: v-bind(primary_hot_color);
				color: #FFFFFF;
			}
			.invite_joiner:hover{
				background-color: #FFFFFF;
				border: 1px solid v-bind(primary_hot_color);
				color: v-bind(primary_text_color);
			}
		}
	}
</style>
